<template>
	<view class="page">
		<!-- 头部图片 -->
		<view class="header-image" v-if="courseInfo.cover">
			<image 
				class="course-banner" 
				:src="courseInfo.cover || '/static/img/bg1.png'" 
				mode=""
			></image>
		</view>
		
		<!-- 课程信息区域 -->
		<view class="course-info-section">
			<view class="course-header">
				<view class="course-title">{{ courseInfo.title || '' }}</view>
				<view class="signup-count">报名人数：{{ courseInfo.joinNum || 0 }}</view>
			</view>
			<!-- 课程时间和地址信息 -->
			<view class="course-details">
				<view class="detail-item">
					<text class="t">时间:</text>
					<text class="detail-text">{{courseInfo.classAt}}<text style="padding-left: 20rpx;">{{ formatTimeRange(courseInfo.startAt, courseInfo.endAt) }}</text> </text>
				</view>
				
				<view class="detail-item">
					<text class="t">地址:</text>
					<text class="detail-text">{{ courseInfo?.venueEntity?.address || '' }}</text>
				</view>
			</view>
			
			<!-- 教练信息 -->
			<view class="coach-info">
				<image 
					class="coach-avatar" 
					:src="courseInfo?.venueUserEntity?.faceImgUrl" 
					mode=""
				></image>
				<view class="coach-details">
					<view class="coach-name">{{ courseInfo?.venueUserEntity?.name || '' }}</view>
					<view class="coach-phone">电话：{{ courseInfo?.venueUserEntity?.mobile || '' }}</view>
				</view>
			</view>
		</view>
		
		<!-- 课程介绍模块 -->
		<view class="course-intro-section">
				<uv-parse :content="courseInfo.remark"></uv-parse>
		</view>
		
		<!-- 悬浮底部栏 -->
		<view class="bottom-bar">
			<view class="price-section">
				<text class="price-symbol">¥</text>
				<text class="price-amount">{{ courseInfo.price || '140' }}</text>
			</view>
			<view class="buy-button" @click="buyNow">
				立即支付
			</view>
		</view>
		<fui-loading type="col" v-if="loadActive" :isFixed="true" :isMask="true"></fui-loading>
	</view>
</template>

<script setup>
	import uvParse from '@/components/uv-parse/components/uv-parse/uv-parse.vue'

	/**
	 * ==================== 数据定义 ====================
	 */
	const loadActive = ref(false)
	const businessId = ref('');
	// 课程信息数据
	const courseInfo = ref({})
	// 表单数据
	const formData = ref({
		name: '',           // 姓名
		mobile: '',          // 手机号码
		idcard: '',         // 身份证号码
		urgentLinker: '', // 紧急联系人电话
		faceImgUrl: '',       // 人脸照片
		hasOldFaceImg: 0       // 是否有历史人脸
	})
	
	/**
	 * 格式化时间，提取小时和分钟
	 * @param {string} timeString - 时间字符串，格式如：'2025-08-11 22:00:37'
	 * @returns {string} 格式化后的时间，如：'22:00'
	 */
	const formatTime = (timeString) => {
		if (!timeString) return '';
		
		try {
			// 如果已经是 HH:MM 格式，直接返回
			if (/^\d{2}:\d{2}$/.test(timeString)) {
				return timeString;
			}
			
			// 处理完整的日期时间格式
			const date = new Date(timeString);
			if (isNaN(date.getTime())) {
				// 如果无法解析为日期，尝试提取时间部分
				const timeMatch = timeString.match(/(\d{2}):(\d{2})/);
				if (timeMatch) {
					return `${timeMatch[1]}:${timeMatch[2]}`;
				}
				return timeString; // 返回原始字符串
			}
			// 格式化为 HH:MM
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			return `${hours}:${minutes}`;
		} catch (error) {
			console.error('时间格式化错误:', error);
			return timeString; // 出错时返回原始字符串
		}
	}
	
	/**
	 * 格式化时间范围
	 * @param {string} startTime - 开始时间
	 * @param {string} endTime - 结束时间
	 * @returns {string} 格式化后的时间范围，如：'22:00-23:00'
	 */
	const formatTimeRange = (startTime, endTime) => {
		const formattedStart = formatTime(startTime);
		const formattedEnd = formatTime(endTime);
		return `${formattedStart}-${formattedEnd}`;
	}
	/**
	 * 立即购买
	 */
	const buyNow = () => {
		const param = {
			classId:businessId.value,
			facePohoto:courseInfo.value.cover,
			faceName:courseInfo.value.title,
			teachPrice:courseInfo.value.price,
			classType:courseInfo.value.classType,
			venueId:courseInfo.value.venueId,
			selectedTimeTime:courseInfo.value.classAt+'    '+formatTimeRange(courseInfo.value.startAt, courseInfo.value.endAt)
		}
		console.log(businessId.value);

		if(formData.value?.faceImgUrl){//有人脸直接购买
			const param2 = {
				...param,
				...formData.value,

			}
			uni.redirectTo({
				url: `/pagesA/view/course/pay2?param=${JSON.stringify(param2)}`
			})
		}else{
			// 跳转到购买资料填写页面
			uni.navigateTo({
				url: `/pagesA/view/course/dataCourse?param=${JSON.stringify(param)}`
			})
		}
	}
	
	/**
	 * 加载课程详情数据
	 */
	const loadCourseDetails = (courseId) => {
		loadActive.value = true;
		uni.api.getTeamClassDetail({
			businessId:businessId.value
		}).then(res => {
		  if (res.code == 0) {
			courseInfo.value = res.data || {};
		  }
		  loadActive.value = false;
		});
	}

	const getUser = ()=>{
		uni.api.getNewFaceImg().then(res => {
		  if (res.code == 0) {
			// 对象遍历 有值 赋值
			Object.keys(res.data).forEach(key => {
				if (res.data[key]) {
					formData.value[key] = res.data[key]
				}
			})
			formData.value.hasOldFaceImg = res.data?.faceImgUrl?1:0;
		  }
		});
	}
	
	/**
	 * ==================== 生命周期 ====================
	 */
	onLoad((options) => {
		if (options.businessId) {
			businessId.value = options.businessId;
			loadCourseDetails(options.id)
		}
		getUser();
	})
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background-color: #000;
		padding-bottom: 120rpx; // 为底部悬浮栏留出空间
	}
	
	// 头部图片
	.header-image {
		width: 100%;
		height: 450rpx;
		position: relative;
		overflow: hidden;
		
		.course-banner {
			width: 100%;
			height: 100%;
			border-radius: 0 0 30rpx 30rpx;
			box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.3);
		}
		
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
			pointer-events: none;
		}
	}
	
	// 课程信息区域
	.course-info-section {
		// background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
		color: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
		.course-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 20rpx;
			padding:10rpx;
			border-radius: 16rpx;
			
			.course-title {
				font-size: 32rpx;
				font-weight: 700;
				color: #fff;
				flex: 1;
				margin-right: 20rpx;
			}
			
			.signup-count {
				font-size: 24rpx;
				color: #fff;
				white-space: nowrap;
			}
		}
		
		.course-details {
			margin-bottom: 40rpx;
			
			.detail-item {
				display: flex;
				align-items: center;
				padding: 20rpx;
				border-radius: 12rpx;
				.t{
					font-size: 24rpx;
				}
				.detail-text {
					margin-left: 16rpx;
					font-size: 24rpx;
					line-height: 1.6;
					flex: 1;
					color: #e0e0e0;
				}
			}
		}
		
		.coach-info {
			display: flex;
			align-items: center;
			// background-color: rgba(255, 255, 255, 0.08);
			padding: 24rpx;
			// border-radius: 16rpx;
			// border: 1rpx solid rgba(255, 255, 255, 0.1);
			
			.coach-avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 24rpx;
				border: 3rpx solid #ff6b35;
				box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3);
			}
			
			.coach-details {
				flex: 1;
				
				.coach-name {
					font-size: 30rpx;
					font-weight: 600;
					margin-bottom: 12rpx;
					color: #fff;
				}
				
				.coach-phone {
					font-size: 26rpx;
					color: #ff6b35;
					background-color: rgba(255, 107, 53, 0.1);
					padding: 6rpx 12rpx;
					border-radius: 12rpx;
					display: inline-block;
				}
			}
		}
	}
	
	// 课程介绍模块
	.course-intro-section {
		// background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
		color: #fff;
		margin: 20rpx;
		// border-radius: 20rpx;
		// box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.5);
		// border: 1rpx solid rgba(255, 255, 255, 0.1);
		// overflow: hidden;
		
	}
	
	// 悬浮底部栏
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		height: 100rpx;
		z-index: 100;
		
		.price-section {
			flex: 1;
			background-color: #4a4a4a;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.price-symbol {
				font-size: 32rpx;
				color: #fff;
				font-weight: 700;
			}
			
			.price-amount {
				font-size: 48rpx;
				color: #fff;
				font-weight: 700;
				margin-left: 6rpx;
			}
		}
		
		.buy-button {
			flex: 1;
			background-color: #B8860B;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-weight: 700;
			
			&:active {
				background-color: #A0750A;
			}
		}
	}
</style>